<template>
	<view class="container">
		<!-- 详情图片 -->
		<view class="detailImage">
			<image :src="baseUrl + goodDesc.img">
		</view>
		
		<!-- 详情基本信息 -->
		<view class="detailInfo">
			<view class="detailPrice">
				<view class="detailPrice_left">
					<text>￥</text>
					<text>{{goodDesc.price}}</text>
					<text>￥{{goodDesc.market_price}}</text>
				</view>
				<view class="detailPrice_right" hover-class="touchOpacity">
					<image src="./img/follow.png"></image>
					<text>收藏</text>
				</view>
			</view>		
			<view class="detaildesc">
				<text>{{goodDesc.goodsname}}</text>
<!-- 				<text>{{goodDesc.description}}</text> -->
			</view>
			<view class="detailslogan">11.11限时299元起</view>
			<view class="detaillook" hover-class="touchOpacity">
				<text>此商品于2020-11-11,结束闪购特卖，品牌美妆闪购专场</text>
				<text>查看 ></text>
			</view>
		</view>
		
		<!-- 基本信息改变 -->
		<view class="changeInfo">
			<!-- 优惠券 -->
			<view class="ticketstage">
				<view class="ticketstage_title">领券</view>
				<view class="ticketstage_ticket">
					<view class="">100</view><view >50</view><view >20</view>
				</view>
			</view>
			<!-- 分期 -->
			<view class="ticketstage">
				<view class="ticketstage_title">分期</view>
				<view class="ticketstage_stage" hover-class="touchOpacity">
						<text @click="choiceStage">{{stage[value]}}</text>
						<text> > </text>
				</view>
			</view>
			
			<!-- 商品属性 -->
			<view class="changeState">
				<view class="productStat">
					<label for="">商品属性</label>
				</view>
				<view class="productGuige">
					<label>{{goodDesc.specsname}}</label>
					<view :class="index == attrIndex ? 'changethreed3i1':''"  @click="changeAttr(index)"  v-for="(item,index) in goodDesc.specsattr"   >{{item}}</view>
				</view>
			</view>
		</view>
		<!-- 商品详情 -->
		 <view class="productDetail">
			<view class="productDetailTitle">商品详情</view>
			<!-- 需要处理图片自适应问题 -->
			<!-- <image :src="productDetailImage.detailImage" mode="widthFix" style="width: 100%;" /> -->
			<view v-html="goodDesc.description"></view>
		</view>
		
		<!-- 商品评价区域 -->
		<view class="productEval">
			<view class="eval">商品评价</view>
			<view v-for="(item,index) in evals" :key="index">
				<label class="evalUsername">{{item.name}}</label>
				<label class="evalUsertitle">{{item.title}}</label>					
				<view class="evalImage">
					<image v-for="(i,ind) in item.img" :key="ind" :src="i">
				</view>
				<label class="evalTime">{{item.time}}</label>
			</view>
		</view>
		
		<!-- 底部按钮 -->
		<view class="navigation">
			<view class="left">
				<view class="item">
					<u-icon name="server-fill" :size="40" :color="$u.color['contentColor']"></u-icon>
					<view class="text u-line-1">客服</view>
				</view>
				<view class="item">
					<u-icon name="home" :size="40" :color="$u.color['contentColor']"></u-icon>
					<view class="text u-line-1">店铺</view>
				</view>
				<view class="item car" @click="goCart">
					<u-badge class="car-num" :count="cartCount" type="error" :offset="[-3, -6]"></u-badge>
					<u-icon name="shopping-cart" :size="40" :color="$u.color['contentColor']"></u-icon>
					<view class="text u-line-1">购物车</view>
				</view>
			</view>
			<view class="right">
				<view class="cart btn u-line-1" @click="addCart" >加入购物车</view>
				<view class="buy btn u-line-1" @click="goOrder">立即购买</view>
			</view>
		</view>
		
		<!-- 分享给朋友 微信端 -->
		<!-- #ifdef MP-WEIXIN -->
		<view class="shareFriend" >
			<button type="default" open-type="share">
				<image src="../../static/icon/wxshare.png" mode=""></image>
			</button>
		</view>
		<!-- #endif -->
		
		<!-- 客服 -->
		<view :hidden="true" class="kefu">
			<image src="./img/kefu.png" @click="goKefu"></image>
		</view>
		
	</view>
</template>

<script>
	import {mapState} from 'vuex';
	
	export default {
		data() {
			return {
				stage:['可选3/6/12期','3期','6期','12期'],//分期默认值
				value:0,//默认分期提示
				cartCount:'',//初始化购物车右上角角标
				goodDesc:{},
				productDetailImage:{
					detailImage:"../../static/img/detail/2.jpg"
				},
				evals: [{  //评价内容
					name: '小李白',
					title: '效果很好，物流到位，下次继续来',
					img: [],
					time: '2020-01-13'
				}],
				id:'',
				baseUrl:this.$baseUrl,
				attrIndex:0
			}
		},
		computed:{
			...mapState([
				'userInfo'
			])
		},
		onLoad: function (options) {
			
			this.id = options.id;
			this.getDetail()
		},
		onShow() {
			this.getCartList()
			uni.setNavigationBarTitle({
				title:'商品详情'
			})
		},
		methods: {
			// 立即购买
			goOrder(){
				this.goodDesc.num = 1;
				let countmoney = {};
				countmoney.price = this.goodDesc.price
				countmoney.delta = this.goodDesc.market_price - this.goodDesc.price
				let cartInfo = {
					cartList:[this.goodDesc],
					countmoney,
					countnumber:1
				}
				uni.setStorageSync('cartInfo',cartInfo)
				uni.navigateTo({
					url:'../../../pages/order/order'
				})
			},
			// 获取购物车数量
			async getCartList(){
				let userInfo = uni.getStorageSync('userInfo') || null
				if(userInfo){
					let {uid,token} = userInfo;
					let res = await this.$http({
						url:'cartlist',
						header:{
							"content-type":"application/json",
							"authorization":token
						},
						data:{
							uid
						}
					})
					if(res.data.code === 200){
						if(res.data.list){
							this.cartCount = res.data.list.length
						}
					}
				}
				
				
			},
			
			// 去购物车页面
			goCart(){
				uni.switchTab({
					url:'../../../pages/cart/cart?count=' + this.cartCount
				})
				
			},
			async addCart(){
				// 添加购物车  数量加1
				console.log("token",uni.getStorageSync('userInfo'));
				let res = await this.$http({
					url:'cartadd',
					method:'post',
					header:{
						"content-type":"application/json",
						"authorization":uni.getStorageSync('userInfo').token || null
					},
					data:{
						uid: uni.getStorageSync('userInfo').uid || null,
						goodsid:this.id,
						num:1
					}
				})
				console.log('添加购物车返回的数据',res);
				if(res.data.code === 200){
					uni.showToast({
						title:res.data.msg,
						icon:'none'
					})
					this.cartCount = res.data.list.cartCount
					
					setTimeout(() => {
						this.goCart()
					},1000)
				}else{
					uni.showToast({
						title:res.data.msg,
						icon:'none'
					})
					// token过期 重新登录
					setTimeout(()=>{
						// #ifdef MP-WEIXIN
						uni.navigateTo({
							url:'../../../pages/login/login'
						})
						// #endif
						
						// #ifndef MP-WEIXIN
						uni.navigateTo({
							url:'../../../pages/textlogin/textlogin'
						})
						// #endif
					},1000)
					
				}
				
			},
			changeAttr(index){
				console.log(index);
				this.attrIndex = index
			},
			// 客服页面
			goKefu(){
				uni.navigateTo({
					url:'../HM-chat/HM-chat'
				})
			},
			// 分期事件
			choiceStage(){
				uni.showActionSheet({
					itemList:['3期','6期','12期'],
					itemColor:'#FF6040',
					success:res=>{
						this.value = res.tapIndex+1
					},
					fail:err=>{this.value=0}
				})
			},
			async getDetail(){
				let res = await this.$http({
					url:'getgoodsinfo',
					data:{
						id:this.id
					}
				})
				console.log(res);
				if(res.data.code === 200){
					console.log(res.data.list[0]);
					this.goodDesc = res.data.list[0]
					this.goodDesc.specsattr = res.data.list[0].specsattr.split(',')
					console.log(this.goodDesc);
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* 引入样式 */
	@import './gooddesc.scss';
</style>

